<script setup>
/**
 * & 文件引入区域
 */

import { ref } from "vue";

import { useIndexStore } from "@/stores/indexStore";

/**
 * & 注册区
 */
defineProps(["bg", "color"]);

/**
 * & 变量声明区
 */
let isForex = ref(false); // 控制汇率列表的显示隐藏

/**
 * & 函数区
 */
</script>

<template>
  <div class="forexList" :style="{ background: bg, color }">
    <div class="title" @click="isForex = !isForex">
      <span>Forex:</span>
      <van-icon name="arrow-down" class="" />
    </div>

    <Transition>
      <div class="content" v-show="isForex">
        <div
          class="item"
          v-for="(item, i) in useIndexStore().ForexList"
          :key="i"
        >
          1eCNY ≈ <span>{{ item.conversionRate }}{{ item.format }}</span>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.forexList {
  width: 100%;
  background: rgb(187, 187, 187);
  border-radius: 6rem;

  font-size: 14rem;
  font-weight: 500;

  margin: 10rem 0;
  padding: 10rem 0;

  > .title {
    display: flex;
    justify-content: space-between;
    padding: 0 10rem;
  }

  > .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    padding-top: 5rem;

    overflow-y: hidden;

    > .item {
      font-weight: 400;
      text-align: center;

      width: 46%;
      padding: 5rem;
    }

    &.close {
      height: 0;
    }
  }
}
</style>
